<template>
  <div>
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <b
        >/<i
          style="font-size: 16px; margin-right: 5px"
          class="el-icon-s-tools"
        ></i
        >账户设置</b
      >
    </div>
    <div class="register">
      <div class="registerCon setting">
        <p>账户设置</p>
        <el-form
          v-if="Object.keys(ruleForm).length > 0"
          :model="ruleForm"
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="140px"
        >
          <el-form-item label="企业码">
            <el-input disabled v-model="ruleForm.businessNo"></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input disabled v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所属行业">
            <el-input disabled v-model="ruleForm.industyMsg"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名">
            <el-input disabled v-model="ruleForm.legalName"></el-input>
          </el-form-item>
          <el-form-item label="企业联系人">
            <el-input disabled v-model="ruleForm.linkManName"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话">
            <el-input disabled v-model="ruleForm.extendMsg"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input disabled v-model="ruleForm.socialCreditCode"></el-input>
          </el-form-item>
          <el-form-item label="营业执照照片" prop="creditCode">
            <div class="image-box">
              <b>点击查看营业执照</b>
              <el-image
                :preview-src-list="[ruleForm.licenseUrl]"
                :src="ruleForm.licenseUrl"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="合同附件" prop="creditCode">
            <div class="image-box">
              <b @click="openUrl(ruleForm.agreementUrl)">点击查看合同附件</b>
              <!-- <el-image
                :preview-src-list="[ruleForm.agreementUrl]"
                :src="ruleForm.agreementUrl"
              ></el-image> -->
            </div>
          </el-form-item>
          <el-form-item label="资质附件" prop="creditCode">
            <div class="image-box">
              <span style="color:#C0C4CC" v-if="ruleForm.qualAttachmentUrl == null != ruleForm.qualAttachmentUrl == ''">-</span>
              <b v-else @click="openUrl(ruleForm.qualAttachmentUrl)">点击查看资质附件</b>
              <!-- <el-image
                :preview-src-list="[ruleForm.qualAttachmentUrl]"
                :src="ruleForm.qualAttachmentUrl"
              ></el-image> -->
            </div>
          </el-form-item>
          <el-form-item class="contactsPic" label="企业logo" prop="logo">
            <el-input v-model="ruleForm.logoUrl"></el-input>
            <el-upload
              action="#"
              list-type="picture-card"
              :multiple="false"
              :show-file-list="false"
              :limit="1"
              :auto-upload="true"
              :http-request="uploadFileLogo"
              ref="uploadImage"
            >
              <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="修改密码" prop="creditCode">
            <div class="image-box">
              <b @click="vocationalWork()">修改密码</b>
            </div>
          </el-form-item>
        </el-form>
        <el-dialog
          title="修改密码"
          v-model="vocationalWorkShow"
          custom-class="examine-style"
          width="50%"
        >
          <div class="modifyPassword">
            <el-form
              ref="formPassword"
              class="demo-ruleForm"
              label-width="140px"
              :model="passwordObj"
              :rules="rule"
            >
              <el-form-item label="当前密码" prop="password">
                <el-input v-model="passwordObj.password"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="passwordObj.newPassword"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="configNewPassword">
                <el-input v-model="passwordObj.configNewPassword"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="vocationalWorkShow = false">取 消</el-button>
              <el-button type="primary" @click="configPasswordMethods"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
        <div class="login-btn">
          <el-button type="primary" @click="logoConfig"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nextStep: 2,
      vocationalWorkShow: false,
      fileData: null,
      url: "http://120.27.147.47:8080/img/img.146655c9.jpg",
      srcList: ["http://120.27.147.47:8080/img/img.146655c9.jpg"],
      ruleForm: {},
      passwordObj: {
        password: "",
        newPassword: "",
        configNewPassword: "",
      },
      logoUrl: '',
      rule: {
        password: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        configNewPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getSettingInfo();
  },
  methods: {
    openUrl(url) {
      window.open(url)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("submit!");
        } else {
          if (this.nextStep == 1) {
            this.nextStep = 2;
          }
        }
      });
    },
    handleRemove() {
      this.$refs.uploadImage.clearFiles();
    },
    vocationalWork() {
      this.vocationalWorkShow = true;
    },
    getSettingInfo() {
      // 获取个人信息
      this.$http({
        url: "/api/quick/business/task/selectBusinessEntity",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code == 0) {
          this.ruleForm = data.result;
        }
      });
    },
    configPasswordMethods() {
      // 修改密码
      this.$refs.formPassword.validate((valid) => {
        if (valid) {
          if (
            this.passwordObj.newPassword == this.passwordObj.configNewPassword
          ) {
            this.$http({
              url: "/api/quick/consumer/updatePassword",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                password: this.passwordObj.password,
                newPassword: this.passwordObj.newPassword,
                id: this.$store.state.userInfo.consumerId,
              },
            }).then((data) => {
              if (data.code == 0) {
                this.$message.success("修改成功，请重新登录");
                this.goLogin();
              }
            });
          } else {
            this.$message.error("两次密码输入不一致");
          }
        }
      });
    },
    goLogin() {
      this.$http({
        url: "/api/quick/consumer/doLogout",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code == 0) {
          localStorage.removeItem("bussines_info");
          localStorage.removeItem("bussines_token");
          this.$router.push("/login");
        }
      });
    },
    uploadFileLogo(res) {
      // 上传头像
      let formData = new FormData();
      formData.append("file", res.file);
      this.$http({
        url: "/api/quick/oss/uploadBySingle",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then((data) => {
        if (data.code == 0) {
          this.ruleForm.logoUrl = data.result;
        }
      });
    },
    logoConfig() {
      // 修改头像
      if(this.ruleForm.logoUrl == null || this.ruleForm.logoUrl == undefined){
        this.ruleForm.logoUrl = ''
      }
      this.$http({
        url: "/api/quick/business/task/updateBusinessEntity",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          logoUrl: this.ruleForm.logoUrl,
          id: this.ruleForm.id
        }
      }).then((data) => {
        console.log(data)
        if (data.code == 0) {
          let userinfo = JSON.parse(localStorage.getItem("bussines_info"))
          userinfo.businessLogoUrl = data.result.logoUrl
          localStorage.setItem("bussines_info", JSON.stringify(userinfo))
          location.reload()
        }
      });
    },
  },
};
</script>
<style scoped>
html,
body {
  overflow: inherit;
}
.register {
  width: 100%;
  background: #eef4fb;
  float: left;
  height: 100%;
}
.registerCon {
  width: 100%;
  float: left;
  margin: 0 0 50px;
  background: #fff;
  box-shadow: 0px 4px 6px 0px #e1efff;
}
.login-btn {
  text-align: center;
  margin: 60px 0 30px -150px;
}
.login-btn button {
  width: 90px;
  height: 40px;
}
.registerCon p {
  font-size: 14px;
  color: #0a2e6a;
  border-bottom: 1px solid #eef4fb;
  padding: 30px 0;
  margin: 0 0 30px 60px;
}
.setting :deep(.el-upload--picture-card) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

